<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .tip{
            position: fixed;
            right:10px;
            bottom:10px;
            width:200px;
            height:150px;
            text-align: center;
            line-height: 150px;
            border:1px solid #DDDDDD;
            box-shadow: 0 0 5px 0px #DDDDDD;
            border-radius: 10px;

        }

        .fade-enter-active,
        .fade-leave-active {
            transition: opacity 0.5s ease;
        }

        .fade-enter-from,
        .fade-leave-to {
            opacity: 0;
        }
    </style>
</head>
<body>
<div id="app">

    <button @click="openDoor">打开阀门</button>

    <transition name="fade">
    <div class="tip" v-if="visible" >{{info}}</div>
    </transition>

</div>
<script src="./vue.global.js"></script>
<script src="./axios.min.js"></script>
<script>
    const app = {
        setup() {

            const visible = Vue.ref(false);
            const info = Vue.ref('');

            const openDoor = ()=>{
                axios.get('open-door').then(res=>{
                   if(res.data.success) {
                       axios.get('view-door').then(r=>{
                           if(r.data.success){
                               info.value = '阀门已成功开启！';
                               visible.value = true;
                               setTimeout(()=>{
                                   visible.value = false;
                                   info.value = '';
                               },2000);
                           }
                       });
                       alert("打开阀门指令已成功发出！");
                   }
                });
            };

            return {
                openDoor,
                visible,
                info

            };
        }
    };
    Vue.createApp(app).mount('#app');
</script>
</body>
</html>